<template>
	<view class="find">
	
		<view class="top">
			
			<uni-nav-bar class="uniNavBars" :backgroundColor="headColor">
				<view class="center">
					<text class="recommend" :class="{active:show==1}" @tap="show=1">精选文章</text>
					<text class="brand" :class="{active:show==2}" @tap="show=2">好物推荐 </text>
				</view>
			</uni-nav-bar>
		</view>
	<!-- #ifdef APP-PLUS -->
		<view class="status_bar" v-if="show==1">
			<view class="top_view"></view>
		</view>
		<!--#endif   -->
		<!-- 第一页 -->
		<view v-show="show == 1" class="article-section">
			<radio-group class="head-bar" @change="headChange">
				<label class="label" :class="{'active':currentKind==item.id}" v-for="item  in kindList" :key="item.id">
					<radio :value="item.id" />
					<view class="imgs">
						<image class="img" :src="item.icon" mode=""></image>
					</view>
				</label>
			</radio-group>


			<!-- 文章 -->
			<view class="article">
				<view class="article-block" v-for="item in aritlceList" :key="item.id">

					<navigator :url="'/pages/find/detail/detail?id='+item.id">
						<image class="coverImg" :src="item.coverImg" mode="">
							
						</image>

						<view class="name-box">
							<view class="title">
								{{item.title}}
							</view>
							<view class="author">
								{{item.author}}
							</view>
						
						</view>
						
					</navigator>
					
					<view class="icons">
						<view class="icon-view">
							<image class="icon view" :src="view" mode=""></image>
							<text class="zanCount">{{ item.zanCount }}</text>
						</view>
						<view class="icon-zan">
							<image class="icon zan" :src="zan" mode=""></image>
							<image class="icon share" :src="share" mode=""></image>
						</view>

					</view>
				</view>
			</view>

		</view>


		<!-- 第二页 -->

		<view v-show="show==2" class="swiper-banner">
			<!-- 上下滑 -->
			<scroll-view :scroll-top="scrollTop" scroll-with-animation="true" scroll-y="true" class="scroll-Y">
				<view id="demo1" class="scroll-view-item uni-bg-red">
					<swiper class="swiper">
						<swiper-item class="swiper-item" v-for="(item,index) in seriesAll" :item-id="item.id" :key="item.id">
							<image class="swiper-img" :src="item.bg_img" mode="aspectFill" fade-show=true></image>
							<view class="position">
								<view class="name">
									<view class="ename">{{item.ename}}</view>
									<view class="cname">{{item.cname}}</view>
								</view>
								<view class="altitude">
									<text class="texts">高度</text>
									<text class="texts">区域</text>
									<view class="">
										<text class="num">23</text>
										<text class="num">42</text>
									</view>
								</view>

								<view class="dot">

								</view>
								<!-- 循环轮播 -->
								<view class="swiper-banners">
									<swiper class="swiper-ss" previous-margin="128rpx" next-margin="60rpx">
										<swiper-item v-for="items in item.productList" :key="items.id">
											<navigator :url="'/pages/kind/details/details?productId='+items.id">
												<image class="img-ss" :src="items.cover_img" mode=""></image>
												<!-- 底色 定位上去的 -->
												<view class="background">
													<view class="name">
														<view class="gname">
															{{ items.gname }}
														</view>
														<view class="descr">
															{{items.descr}}
														</view>
														<view class="sku_count">
															{{items.sku_count}}
														</view>
														<view class="price_now">
															${{ items.price_now }}
														</view>
													</view>
												</view>
											</navigator>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<!-- 循环轮播 -->
					<swiper class="swiper">
						<swiper-item class="swiper-item" v-for="(item,index) in seriesAll" :item-id="item.id" :key="item.id">
							<image class="swiper-img" :src="item.bg_img" mode="aspectFill" fade-show=true></image>
							<view class="position">
								<view class="name">
									<view class="ename">{{item.ename}}</view>
									<view class="cname">{{item.cname}}</view>
								</view>
								<view class="altitude">
									<text class="texts">高度</text>
									<text class="texts">区域</text>
									<view class="">
										<text class="num">23</text>
										<text class="num">42</text>
									</view>
								</view>
								<!-- 循环轮播 -->
								<view class="swiper-banners">
									<swiper class="swiper-ss" previous-margin="128rpx" next-margin="60rpx">
										<swiper-item v-for="items in item.productList" :key="items.id">
											<navigator :url="'/pages/kind/details/details?productId='+items.id">
												<image class="img-ss" :src="items.cover_img" mode=""></image>
												<!-- 底色 定位上去的 -->
												<view class="background">
													<view class="name">
														<view class="gname">
															{{ items.gname }}
														</view>
														<view class="descr">
															{{items.descr}}
														</view>
														<view class="sku_count">
															{{items.sku_count}}
														</view>
														<view class="price_now">
															${{ items.price_now }}
														</view>
													</view>
												</view>
											</navigator>
										</swiper-item>
									</swiper>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniNavBars from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import findApi from "@/api/find/find.js"
	import KindApi from "@/api/kind/kind.js"
	import brands from "@/pages/find/brands/brands"
	import view from "@/static/icons/view.png"
	import share from "@/static/icons/share.png"
	import zan from "@/static/icons/zan.png"
	export default {
		components: {
			uniNavBars,
			brands
		},
		data() {
			return {
				view,
				share,
				zan,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},


				kindList: [],


				show: 1,
				// 跳转
				currentKind: '',
				// 文章
				aritlceList: [],
				seriesAll: [],
				productList: [],
			sId: '',

			}
		},
	
		onLoad(option) {

			
		

			// 好物推荐
			this.getSeriesAll()
			this.getAritlceList()
			this.getKindList()
		},
		methods: {



			getSeriesAll() {
				// 好物推荐
				findApi.seriesAll().then(res => {
					this.seriesAll = res.data
					// console.log(res)
				})

			},
			
			
		

			//获取分类
			async getKindList() {
				var {
					data
				} = await KindApi.kindList();
				var icons = [
					"../../static/icons/diaodeng.png",
					"../../static/icons/yigui.png",
					"../../static/icons/yizi.png",
					"../../static/icons/huaping.png",
				]
				for (var i = 0; i < data.length; i++) {
					data[i].icon = icons[i];

				}

				this.kindList = data;
				this.currentKind = data[0].id;
				this.getAritlceList();
			},
	// 精选文章

			// async getAritlceList() {

			// 	var {
			// 		data
			// 	} = await findApi.aritlceList({

			// 		kindId: this.currentKind,
			// 	})
			// 	this.aritlceList = data.list

			// 	// console.log("aritlceList", data)
			// },
			// 精选文章
			getAritlceList(){
				findApi.aritlceList(
				{
						kindId: this.currentKind,
				}
			
				).then(res =>{
					this.aritlceList =res.data.list
					
				})
			},

			// 导航
			headChange(e) {
				this.currentKind = e.detail.value;

				this.getAritlceList();
			}

		},
	computed: {
			headColor() {
				
				return this.show == 1 ? '#354E44' : 'transparent';
			}
		},
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #354E44;
	}
	
	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #354E44;
		top: 0;
		z-index: 999;
	}
	.find {
		
		.top {
			
			
			.uniNavBars {
				// background-color: $leju-base-bg-color;
				background-color: transparent;
				box-sizing: border-box;
				position: fixed;
				left: 0;
				top:0;
				/*#ifdef APP-PLUS*/
				margin-top: 50rpx;
				 /*#endif*/
					
					
				z-index: 999;
				
		
				
				
				
				
				border-bottom: none;
				
				// 去除uniNavBars 组件的横线
				::v-deep .uni-navbar--border {
					border-bottom: none;
				}

				.center {
					font-family: PingFangSC-Regular;
					font-size: 32rpx;
					color: #FFFFFF;
					letter-spacing: 2.29rpx;
					margin: 0 auto;
					
					.active {
						border-bottom: 4rpx solid #fff;

					}

					.recommend {
						margin: 24rpx;

					}

					.brand {
						margin: 24rpx;

					}
				}
			}
		}

		.article-section {
			.head-bar {
		
				
				padding-top: 100rpx;
			
				display: flex;
				justify-content: space-around;


				.label {
					width: 84rpx;
					height: 84rpx;
					background: #FEFCFC;

					text-align: center;
					border-radius: 50%;
					transition: all ease .4s;

					radio {
						display: none;
					}

					.imgs {
						.img {
							width: 40rpx;
							height: 40rpx;
							margin: 21rpx auto;
						}
					}

					&.active {
						width: 98rpx;
						height: 98rpx;
						background-color: #2B9939;

						.img {

							width: 50rpx;
							height: 50rpx;
							z-index: 999;
						}
					}

				}


			}

			// 文章列表
			.article {
				position: absolute;
				top: 230rpx;
				left: 40rpx;
				/*#ifdef APP-PLUS*/
				margin-top: 50rpx;
				 /*#endif*/
				// bottom: 130rpx;
				.article-block {
					width: 674rpx;
					height: 482rpx;
					box-shadow: 0 12rpx 16rpx 0 rgba(83, 66, 49, 0.03);
					border-radius: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					margin-bottom: 56rpx;

					.coverImg {
						width: 674rpx;
						height: 382rpx;


					}

					.name-box {
						position: absolute;
						left: 20rpx;
						// bottom: 700rpx;
						// z-index: 999;
					

						.title {
							font-family: PingFangSC-Semibold;
							font-size: 40rpx;
							color: #FFFFFF;
							letter-spacing: 3.43rpx;
							margin-top: -200rpx;
						}

						.author {
							font-family: PingFangSC-Regular;
							font-size: 30rpx;
							color: #FFFFFF;
							letter-spacing: 2.14rpx;
							// margin-top: -171rpx;
						}
					}

					.icons {
						display: flex;
						justify-content: space-around;
						padding-top: 18rpx;

						.icon-view {
							.icon.view {
								width: 43.7rpx;
								height: 28rpx;
							}

							.zanCount {
								margin-left: 17rpx;
							}
						}

						.icon-zan {

							.icon.zan {
								width: 39.6rpx;
								height: 39.2rpx;
							}

							.icon.share {
								width: 38.4rpx;
								height: 36.5rpx;
								margin-left: 43rpx;
							}
						}

					}
				}
			}

		}




		// 第二屏
		// 下滑
		.scroll-Y {
			width: 750rpx;
			height: 100%;
		}

		// 轮播
		.swiper-banner {


			.swiper {
				// margin-top: 110rpx;
				width: 100%;
				height: 1235rpx;
				/*#ifdef APP-PLUS*/
					height: 1550rpx;
				 /*#endif*/
			
				.swiper-item {
					width: 750rpx;
					height: 100%;

					.swiper-img {
						position: absolute;
						width: 100%;
						height: 100%;
					}

					.position {
						position: absolute;
						top: 100rpx;
						/*#ifdef APP-PLUS*/
						top: 200rpx;
						 /*#endif*/

						.name {

							margin-left: 40rpx;

							.ename {
								font-family: PingFangSC-Regular;
								font-size: 26rpx;
								color: #FFFFFF;
								letter-spacing: 1.86rpx;
							}

							.cname {
								margin-top: 30rpx;
								font-family: PingFangSC-Semibold;
								font-size: 72rpx;
								color: #FFFFFF;
								letter-spacing: 5.14rpx;
							}
						}

						.altitude {
							margin-top: 78rpx;
							margin-left: 498rpx;

							.texts {
								font-family: PingFangSC-Regular;
								font-size: 28rpx;
								color: #FFFFFF;
								letter-spacing: 2rpx;
								padding-bottom: 14rpx;
								margin-left: 21rpx;
							}

							.num {
								font-family: PingFangSC-Regular;
								font-size: 40rpx;
								color: #FFFFFF;
								letter-spacing: 2.86rpx;
								margin-left: 21rpx;

							}
						}

						.dot {




							margin-top: 50rpx;

							position: absolute;
							left: 600rpx;

						}

						.dot:before {
							content: ' ';
							position: absolute;
							z-index: 999;
							left: 0;
							top: 0;
							width: 0rpx;
							height: 0rpx;
							background-color: #fff;
							border-radius: 50%;

						}

						.dot:after {
							content: ' ';
							position: absolute;
							z-index: 1;
							width: 10rpx;
							height: 10rpx;
							background-color: #fff;
							border-radius: 50%;
							box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
							animation-name: ripple;
							/*动画属性名，也就是我们前面keyframes定义的动画名*/
							animation-duration: 1s;
							/*动画持续时间*/
							animation-timing-function: ease;
							/*动画频率，和transition-timing-function是一样的*/
							animation-delay: 0s;
							/*动画延迟时间*/
							animation-iteration-count: infinite;
							/*定义循环资料，infinite为无限次*/
							animation-direction: normal;
							/*定义动画方式*/
						}

						@keyframes ripple {
							0% {
								left: 5rpx;
								top: 5rpx;
								opcity: 75;
								width: 0;
								height: 0;
							}

							100% {
								left: -20px;
								top: -20px;
								opacity: 0;
								width: 80rpx;
								height: 80rpx;
							}
						}

						// 嵌套轮播
						.swiper-banners {
							width: 750rpx;
							padding-top: 450rpx;

							.swiper-ss {
								width: 100%;
								height: 264rpx;

								.swiper-item {

									height: 264rpx;


								}

								.background {
									position: absolute;

									width: 496rpx;
									height: 264rpx;
									background: #FFFFFF;
									border-radius: 10px 10px;
									border-radius: 10px;

									.name {
										position: absolute;
										left: 274rpx;
										top: 50rpx;

										.gname {

											font-family: PingFangSC-Semibold;
											font-size: 26rpx;
											color: #3E3E3E;
											letter-spacing: 1.86rpx;

										}

										.descr {
											font-family: PingFangSC-Regular;
											font-size: 18rpx;
											color: #B0B0B0;
											letter-spacing: 1.29rpx;
										}

										.sku_count {
											width: 20rpx;
											height: 20rpx;
											border-radius: 50%;
										}

										.price_now {
											font-family: PingFangSC-Regular;
											font-size: 26rpx;
											color: #3E3E3E;
											letter-spacing: 1.29rpx;
										}
									}

								}

								.img-ss {
									position: absolute;
									top: 49rpx;
									left: 40rpx;
									width: 246rpx;
									height: 166rpx;
									z-index: 99;
								}
							}
						}



					}
				}

			}
		}

	}
</style>
